.contact{
	padding: 50px 0;
	background:url(../img/pic/con-bg-1.png) no-repeat center / 100% 100%;
	.warp{
		display: flex;
		flex-wrap: wrap;
		padding-right: 50%;
		.list{
			margin: 16px 0;
			width: 50%;
			display: flex;
			align-items: center;
			.cont{
				margin-left: 6px;
			}
			.name{
				font-size: 18px;
				margin-bottom: 6px;
			}
			a{
				font-size: 14px;
			}
			.detail{
				color: #2b33a8;
				img{
					width: 24px;
					transition: all 0.3s ease-in 10ms;
				}
			}
			.detail:hover{
				color: #2b33a8;
				img{
					margin-left: 10px;
				}
			}
		}
	}
}

.contact-city{
	padding: 50px 0;
	.warp{
		display: flex;
		flex-wrap: wrap;
		.list{
			width: calc((100% - 60px) / 4);
			margin-left: 20px;
			background:url(../img/pic/city-bg.png) no-repeat center / 100% 100%;
			padding: 30px 20px;
			margin-top: 20px;
			transition: all 0.3s;
			.city-name{
				font-weight: 600;
				font-size: 22px;
				line-height: 1.36em;
				color: #181818;
			}
			.city-address{
				margin-top: 1em;
				font-size: 14px;
				line-height: 1.57em;
				color: #666666;	
			}
		}
		.list:nth-child(4n + 1){
			margin-left: 0;
		}
		.list:hover{
			box-shadow: 0px 0px 10px 0px rgba(24, 24, 24, 0.2);
		}
	}
}

@media only screen and (max-width: 750px) {
	.contact{
		padding: 0.3rem 0.1rem;
		.warp{
			padding-right: 0;
			.list{
				margin: 0.08rem 0;
				width: 100%;
				img{
					width: 0.4rem;
				}
				.cont{
					margin-left: 0.04rem;
				}
				.name{
					font-size: 0.15rem;
					margin-bottom: 0.08rem;
				}
				a{
					font-size: 0.12rem;
				}
				.detail{
					img{
						width: 0.2rem;
					}
				}
			}
		}
	}
	
	.contact-city{
		padding: 0.2rem 0.1rem;
		.warp{
			display: flex;
			flex-wrap: wrap;
			.list{
				width: calc((100% - 0.2rem) / 2);
				margin-left: 20px;
				padding: 0.1rem;
				margin-top: 0.1rem;
				.city-name{
					font-size: 0.14rem;
				}
				.city-address{
					margin-top: 0.12rem;
					font-size: 0.12rem;	
				}
			}
			.list:nth-child(2n + 1){
				margin-left: 0;
			}
		}
	}
}